156. Araxis Merge File Comparison Report

Produced by Araxis Merge on 2021-07-21 10:22:13 +0000. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.

156.1 Files compared

#LocationFileLast Modified
12021-07-21 10:22:13 +0000
2/Applications/Ampps/www/Porto v4.0.1/Theme Files/Magento 2.x/Porto Theme/app/design/frontend/Smartwave/portogallery.phtml2021-04-28 11:05:02 +0000

156.2 Comparison summary

DescriptionBetween
Files 1 and 2
Text BlocksLines
Unchanged00
Changed00
Inserted1482
Removed00

156.3 Comparison options

WhitespaceConsecutive whitespace is treated as a single space
Character caseDifferences in character case are significant
Line endingsDifferences in line endings (CR and LF characters) are ignored
CR/LF charactersNot shown in the comparison detail
Active line-pairing rules

156.4 Active regular expressions

No regular expressions were active.

156.5 Comparison detail

    1 <?php
    2 /**
    3  * Copyright © Magento, Inc. All rights reserved.
    4  * See COPYING.txt for license details.
    5  */
    6 
    7 // @codingStandardsIgnoreFile
    8 
    9 /**
    10  * Product media data template
    11  *
    12  * @var $block \Magento\Catalog\Block\Product\View\Gallery
    13  */
    14 ?>
    15 <?php
    16 $helper = $block->getData('imageHelper');
    17 $porto_helper = $this->helper('Smartwave\Porto\Helper\Data');
    18 $_config = $porto_helper->getConfig('porto_settings/product');
    19 $image_width = (isset($_config['ratio_width']) && $_config['ratio_width'])?$_config['ratio_width']:600;
    20 $image_height = (isset($_config['ratio_height']) && $_config['ratio_height'])?$_config['ratio_height']:600;
    21 $aspect_ratio = (isset($_config['aspect_ratio']))?$_config['aspect_ratio']:0;
    22 if ($aspect_ratio)
    23     $image_height = $image_width;
    24 $thumb_width = 75;
    25 $thumb_height = 75 * $image_height / $image_width;
    26 if ($aspect_ratio)
    27     $thumb_height = 75;
    28 $_product = $block->getProduct();
    29 $page_type = $_product->getData('product_page_type');
    30 if(!$page_type)
    31     $page_type = isset($_config['product_page_type'])?$_config['product_page_type']:'';
    32 $image_size = $_product->getData('product_image_size');
    33 $thumbnail_type = (isset($_config['vertical_thumbnail']) && $_config['vertical_thumbnail'])?'vertical':'horizontal';
    34 if($page_type == 'wide_grid') {
    35     $thumbnail_type = 'vertical';
    36     $thumb_width = 100;
    37     $thumb_height = 100;
    38 }
    39 ?>
    40 <?php if($page_type == 'carousel'): ?>
    41 <?php
    42     $gallery_images = json_decode($block->getGalleryImagesJson());
    43 ?>
    44 <div id="gallery_images" class="owl-carousel product-image-carousel">
    45     <?php foreach($gallery_images as $gallery_image): ?>
    46     <div class="item">
    47         <img src="<?php echo $gallery_image->img; ?>" alt=""/>
    48     </div>
    49     <?php endforeach; ?>
    50 </div>
    51 <div class="short-custom-block" style="display: none;"><?php echo $porto_helper->filterContent($_product->getData("custom_block")); ?></div>
    52 <div class="fullwidth-custom-block" style="display: none;"><?php echo $porto_helper->filterContent($_product->getData("custom_block_2")); ?></div>
    53 <script type="text/javascript">
    54   require([
    55     'jquery',
    56     'owl.carousel/owl.carousel.min'
    57   ], function ($) {
    58     $("#gallery_images").owlCarousel({
    59       autoplay: false,
    60       autoplayTimeout: 5000,
    61       autoplayHoverPause: true,
    62       loop: true,
    63       navRewind: true,
    64       margin: 0,
    65       nav: true,
    66       navText: ["<em class='porto-icon-left-open-huge'></em>","<em class='porto-icon-right-open-huge'></em>"],
    67       dots: false,
    68       responsive: {
    69         0: {
    70           items:1
    71         },
    72         768: {
    73           items:1
    74         },
    75         992: {
    76           items:2
    77         },
    78         1200: {
    79           items:3
    80         }
    81       }
    82     });
    83     $(document).ready(function(){
    84         $(".product-info-main > .product-info-price").before($(".short-custom-block").show().detach());
    85         $(".page-main").after($(".fullwidth-custom-block").show().detach());
    86         $(".product-info-main > .prev-next-products").after($(".product-social-links").detach());
    87     });
    88   });
    89 </script>
    90 <?php elseif($page_type == 'grid'): ?>
    91 <?php
    92     $gallery_images = json_decode($block->getGalleryImagesJson());
    93 ?>
    94 <div id="gallery_images" class="row">
    95     <?php foreach($gallery_images as $gallery_image): ?>
    96     <div class="col-sm-6">
    97         <div class="product-image-grid">
    98             <img src="<?php echo $gallery_image->img; ?>" alt=""/>
    99         </div>
    100     </div>
    101     <?php endforeach; ?>
    102 </div>
    103 <?php elseif($page_type == 'sticky_right'): ?>
    104 <?php
    105     $gallery_images = json_decode($block->getGalleryImagesJson());
    106 ?>
    107 <div id="gallery_images">
    108     <?php foreach($gallery_images as $gallery_image): ?>
    109     <div class="product-image-list">
    110         <img src="<?php echo $gallery_image->img; ?>" alt=""/>
    111     </div>
    112     <?php endforeach; ?>
    113 </div>
    114 <div class="short-custom-block" style="display: none;"><?php echo $porto_helper->filterContent($_product->getData("custom_block")); ?></div>
    115 <script type="text/javascript">
    116 require([
    117     'jquery'
    118 ], function ($) {
    119     var product_info_top = 0;
    120     var product_image_box_pos = $(".product.media").offset().top;
    121 
    122     $(window).scroll(function(){
    123         product_image_box_pos = $(".product.media").offset().top;
    124         if($(window).innerWidth() >= 992) {
    125             $(".product-info-main").each(function(){
    126                 if(($(window).scrollTop() > product_image_box_pos - 50) && (product_image_box_pos + $(".product.media").outerHeight()) > ($(window).scrollTop() + $(this).outerHeight() + 50)) {
    127                     product_info_top = $(window).scrollTop() - product_image_box_pos + 50;
    128                     $(this).css('top',product_info_top + 'px');
    129                 } else if ($(window).scrollTop() < product_image_box_pos || $(".product.media").outerHeight() < $(this).outerHeight()) {
    130                     product_info_top = 0;
    131                     $(this).css('top',product_info_top + 'px');
    132                 } else {
    133                     product_info_top = $(".product.media").outerHeight() - $(this).outerHeight();
    134                     $(this).css('top',product_info_top + 'px');
    135                 }
    136             });
    137         } else {
    138             product_info_top = 0;
    139             $(".product-info-main").css('top',product_info_top + 'px');
    140         }
    141     });
    142 
    143     $(window).resize(function(){
    144         product_image_box_pos = $(".product.media").offset().top;
    145         if($(window).innerWidth() >= 992) {
    146             $(".product-info-main").each(function(){
    147                 if(($(window).scrollTop() > product_image_box_pos - 50) && (product_image_box_pos + $(".product.media").outerHeight()) > ($(window).scrollTop() + $(this).outerHeight() + 50)) {
    148                     product_info_top = $(window).scrollTop() - product_image_box_pos + 50;
    149                     $(this).css('top',product_info_top + 'px');
    150                 } else if ($(window).scrollTop() < product_image_box_pos || $(".product.media").outerHeight() < $(this).outerHeight()) {
    151                     product_info_top = 0;
    152                     $(this).css('top',product_info_top + 'px');
    153                 } else {
    154                     product_info_top = $(".product.media").outerHeight() - $(this).outerHeight();
    155                     $(this).css('top',product_info_top + 'px');
    156                 }
    157             });
    158         } else {
    159             product_info_top = 0;
    160             $(".product-info-main").css('top',product_info_top + 'px');
    161         }
    162     });
    163 });
    164 </script>
    165 <?php elseif($page_type == 'fullwidth'): ?>
    166 <div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
    167     <div data-role="loader" class="loading-mask">
    168         <div class="loader">
    169             <img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
    170                  alt="<?php /* @escapeNotVerified */ echo __('Loading...') ?>">
    171         </div>
    172     </div>
    173 </div>
    174 <!--Fix for jumping content. Loader must be the same size as gallery.-->
    175 <script>
    176     var config = {
    177             "width": <?php /* @escapeNotVerified */ echo $image_width; ?>,
    178             "thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height')
    179                         ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>,
    180             "navtype": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/navtype"); ?>",
    181             <?php if (!$aspect_ratio): ?>
    182                 "height": <?php /* @escapeNotVerified */ echo $image_height; ?>
    183             <?php endif; ?>
    184         },
    185         thumbBarHeight = 0,
    186         loader = document.querySelectorAll('[data-gallery-role="gallery-placeholder"] [data-role="loader"]')[0];
    187 
    188     if (config.navtype === 'horizontal') {
    189         thumbBarHeight = config.thumbheight;
    190     }
    191 
    192     loader.style.paddingBottom = ( config.height / config.width * 100) + "%";
    193 </script>
    194 <script type="text/x-magento-init">
    195     {
    196         "[data-gallery-role=gallery-placeholder]": {
    197             "mage/gallery/gallery": {
    198                 "mixins":["magnifier/magnify"],
    199                 "magnifierOpts": <?= /* @escapeNotVerified */ $block->getMagnifier() ?>,
    200                 "data": <?= /* @escapeNotVerified */ $block->getGalleryImagesJson() ?>,
    201                 "options": {
    202                     "nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/nav") ?>",
    203                     <?php if (($block->getVar("gallery/loop"))): ?>
    204                         "loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/loop") ?>,
    205                     <?php endif; ?>
    206                     <?php if (($block->getVar("gallery/keyboard"))): ?>
    207                         "keyboard": <?= /* @escapeNotVerified */ $block->getVar("gallery/keyboard") ?>,
    208                     <?php endif; ?>
    209                     <?php if (($block->getVar("gallery/arrows"))): ?>
    210                         "arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/arrows") ?>,
    211                     <?php endif; ?>
    212                     <?php if (($block->getVar("gallery/allowfullscreen"))): ?>
    213                         "allowfullscreen": <?= /* @escapeNotVerified */ $block->getVar("gallery/allowfullscreen") ?>,
    214                     <?php endif; ?>
    215                     <?php if (($block->getVar("gallery/caption"))): ?>
    216                         "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/caption") ?>,
    217                     <?php endif; ?>
    218                     "width": <?php /* @escapeNotVerified */ echo $image_width; ?>,
    219                     "thumbwidth": <?php /* @escapeNotVerified */ echo $thumb_width; ?>,
    220                     "thumbheight": <?php /* @escapeNotVerified */ echo $thumb_height; ?>,
    221                     <?php if(!$aspect_ratio): ?>
    222                     "height": <?php /* @escapeNotVerified */ echo $image_height; ?>,
    223                     <?php endif; ?>
    224                     <?php if ($block->getVar("gallery/transition/duration")): ?>
    225                         "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/transition/duration") ?>,
    226                     <?php endif; ?>
    227                     "transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/transition/effect") ?>",
    228                     <?php if (($block->getVar("gallery/navarrows"))): ?>
    229                         "navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/navarrows") ?>,
    230                     <?php endif; ?>
    231                     "navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/navtype") ?>",
    232                     "navdir": "vertical"
    233                 },
    234                 "fullscreen": {
    235                     "nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/nav") ?>",
    236                     <?php if ($block->getVar("gallery/fullscreen/loop")): ?>
    237                         "loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/loop") ?>,
    238                     <?php endif; ?>
    239                     "navdir": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navdir") ?>",
    240                     <?php if ($block->getVar("gallery/transition/navarrows")): ?>
    241                         "navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navarrows") ?>,
    242                     <?php endif; ?>
    243                     "navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navtype") ?>",
    244                     <?php if ($block->getVar("gallery/fullscreen/arrows")): ?>
    245                         "arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/arrows") ?>,
    246                     <?php endif; ?>
    247                     <?php if ($block->getVar("gallery/fullscreen/caption")): ?>
    248                         "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/caption") ?>,
    249                     <?php endif; ?>
    250                     <?php if ($block->getVar("gallery/fullscreen/transition/duration")): ?>
    251                         "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/duration") ?>,
    252                     <?php endif; ?>
    253                     "transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/effect") ?>"
    254                 },
    255                 "breakpoints": <?= /* @escapeNotVerified */ $block->getBreakpoints() ?>
    256             }
    257         }
    258     }
    259 </script>
    260 <div class="fullwidth-custom-block" style="display: none;"><?php echo $porto_helper->filterContent($_product->getData("custom_block")); ?></div>
    261 <script type="text/javascript">
    262     require([
    263         'jquery'
    264     ], function($){
    265         $(document).ready(function(){
    266             $(".product.info.detailed").detach().appendTo($(".product-info-main"));
    267             $(".page-main").after($(".fullwidth-custom-block").show().detach());
    268         });
    269         var product_image_box_top = 0;
    270         var product_info_pos = $(".product-info-main").offset().top;
    271         $(window).scroll(function(){
    272             product_info_pos = $(".product-info-main").offset().top;
    273             if($(window).innerWidth() >= 768) {
    274                 $(".product.media").each(function(){
    275                     if(($(window).scrollTop() > product_info_pos - 50) && (product_info_pos + $(".product-info-main").outerHeight()) > ($(window).scrollTop() + $(this).outerHeight() + 50)) {
    276                         product_image_box_top = $(window).scrollTop() - product_info_pos + 50;
    277                         $(this).css('top',product_image_box_top + 'px');
    278                     } else if ($(window).scrollTop() < product_info_pos) {
    279                         product_image_box_top = 0;
    280                         $(this).css('top',product_image_box_top + 'px');
    281                     }
    282                 });
    283             } else {
    284                 product_image_box_top = 0;
    285                 $(".product.media").css('top',product_image_box_top + 'px');
    286             }
    287         });
    288         $(window).resize(function(){
    289             product_info_pos = $(".product-info-main").offset().top;
    290             if($(window).innerWidth() >= 768) {
    291                 $(".product.media").each(function(){
    292                     if(($(window).scrollTop() > product_info_pos - 50) && (product_info_pos + $(".product-info-main").outerHeight()) > ($(window).scrollTop() + $(this).outerHeight() + 50)) {
    293                         product_image_box_top = $(window).scrollTop() - product_info_pos + 50;
    294                         $(this).css('top',product_image_box_top + 'px');
    295                     } else if ($(window).scrollTop() < product_info_pos) {
    296                         product_image_box_top = 0;
    297                         $(this).css('top',product_image_box_top + 'px');
    298                     }
    299                 });
    300             } else {
    301                 product_image_box_top = 0;
    302                 $(".product.media").css('top',product_image_box_top + 'px');
    303             }
    304         });
    305     });
    306 </script>
    307 <?php else: ?>
    308 <?php
    309 $images = $block->getGalleryImages()->getItems();
    310 $mainImage = current(array_filter($images, function ($img) use ($block) {
    311     return $block->isMainImage($img);
    312 }));
    313 if (!empty($images) && empty($mainImage)) {
    314     $mainImage = $block->getGalleryImages()->getFirstItem();
    315 }
    316 $mainImageData = $mainImage ?
    317     $mainImage->getData('medium_image_url') :
    318     $helper->getDefaultPlaceholderUrl('image');
    319 
    320 ?>
    321 <div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
    322     <img
    323         alt="main product photo"
    324         class="gallery-placeholder__image"
    325         src="<?= /* @noEscape */ $mainImageData ?>"
    326     />
    327     <div data-role="loader" class="loading-mask">
    328         <div class="loader">
    329             <img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
    330                  alt="<?php /* @escapeNotVerified */ echo __('Loading...') ?>">
    331         </div>
    332     </div>
    333 </div>
    334 <!--Fix for jumping content. Loader must be the same size as gallery.-->
    335 <script>
    336     var config = {
    337             "width": <?php /* @escapeNotVerified */ echo $image_width; ?>,
    338             "thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height')
    339                         ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>,
    340             "navtype": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/navtype"); ?>",
    341             <?php if (!$aspect_ratio): ?>
    342                 "height": <?php /* @escapeNotVerified */ echo $image_height; ?>
    343             <?php endif; ?>
    344         },
    345         thumbBarHeight = 0,
    346         loader = document.querySelectorAll('[data-gallery-role="gallery-placeholder"] [data-role="loader"]')[0];
    347 
    348     if (config.navtype === 'horizontal') {
    349         thumbBarHeight = config.thumbheight;
    350     }
    351 
    352     loader.style.paddingBottom = ( config.height / config.width * 100) + "%";
    353 </script>
    354 <script type="text/x-magento-init">
    355     {
    356         "[data-gallery-role=gallery-placeholder]": {
    357             "mage/gallery/gallery": {
    358                 "mixins":["magnifier/magnify"],
    359                 "magnifierOpts": <?= /* @escapeNotVerified */ $block->getMagnifier() ?>,
    360                 "data": <?= /* @escapeNotVerified */ $block->getGalleryImagesJson() ?>,
    361                 "options": {
    362                     "nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/nav") ?>",
    363                     <?php if (($block->getVar("gallery/loop"))): ?>
    364                         "loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/loop") ?>,
    365                     <?php endif; ?>
    366                     <?php if (($block->getVar("gallery/keyboard"))): ?>
    367                         "keyboard": <?= /* @escapeNotVerified */ $block->getVar("gallery/keyboard") ?>,
    368                     <?php endif; ?>
    369                     <?php if (($block->getVar("gallery/arrows"))): ?>
    370                         "arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/arrows") ?>,
    371                     <?php endif; ?>
    372                     <?php if (($block->getVar("gallery/allowfullscreen"))): ?>
    373                         "allowfullscreen": <?= /* @escapeNotVerified */ $block->getVar("gallery/allowfullscreen") ?>,
    374                     <?php endif; ?>
    375                     <?php if (($block->getVar("gallery/caption"))): ?>
    376                         "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/caption") ?>,
    377                     <?php endif; ?>
    378                     "width": <?php /* @escapeNotVerified */ echo $image_width; ?>,
    379                     "thumbwidth": <?php /* @escapeNotVerified */ echo $thumb_width; ?>,
    380                     "thumbheight": <?php /* @escapeNotVerified */ echo $thumb_height; ?>,
    381                     <?php if(!$aspect_ratio): ?>
    382                     "height": <?php /* @escapeNotVerified */ echo $image_height; ?>,
    383                     <?php endif; ?>
    384                     <?php if ($block->getVar("gallery/transition/duration")): ?>
    385                         "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/transition/duration") ?>,
    386                     <?php endif; ?>
    387                     "transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/transition/effect") ?>",
    388                     <?php if (($block->getVar("gallery/navarrows"))): ?>
    389                         "navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/navarrows") ?>,
    390                     <?php endif; ?>
    391                     "navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/navtype") ?>",
    392                     "navdir": "<?= /* @escapeNotVerified */ $thumbnail_type ?>"
    393                 },
    394                 "fullscreen": {
    395                     "nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/nav") ?>",
    396                     <?php if ($block->getVar("gallery/fullscreen/loop")): ?>
    397                         "loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/loop") ?>,
    398                     <?php endif; ?>
    399                     "navdir": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navdir") ?>",
    400                     <?php if ($block->getVar("gallery/transition/navarrows")): ?>
    401                         "navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navarrows") ?>,
    402                     <?php endif; ?>
    403                     "navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navtype") ?>",
    404                     <?php if ($block->getVar("gallery/fullscreen/arrows")): ?>
    405                         "arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/arrows") ?>,
    406                     <?php endif; ?>
    407                     <?php if ($block->getVar("gallery/fullscreen/caption")): ?>
    408                         "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/caption") ?>,
    409                     <?php endif; ?>
    410                     <?php if ($block->getVar("gallery/fullscreen/transition/duration")): ?>
    411                         "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/duration") ?>,
    412                     <?php endif; ?>
    413                     "transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/effect") ?>"
    414                 },
    415                 "breakpoints": <?= /* @escapeNotVerified */ $block->getBreakpoints() ?>
    416             }
    417         }
    418     }
    419 </script>
    420 <script type="text/javascript">
    421 require([
    422     'jquery',
    423     'Magento_Catalog/js/jquery.zoom.min'
    424 ], function ($) {
    425     var loaded = false;
    426     $(window).load(function(){
    427       if($('.loading-mask').length)$('.loading-mask').remove();  
    428     });
    429     $('.product.media .gallery-placeholder').bind("DOMSubtreeModified",function(){
    430         $('.product.media .fotorama').on('fotorama:ready', function (e, fotorama, extra) {
    431             loaded = false;
    432             $('.product.media .fotorama').on('fotorama:load', function (e, fotorama, extra) {
    433                 if(!loaded){
    434                     $('.product.media .fotorama__stage .fotorama__loaded--img').trigger('zoom.destroy');
    435                     $('.product.media .fotorama__stage .fotorama__active').zoom({
    436                         touch:false
    437                     });
    438                     loaded = true;
    439                 }
    440             });
    441             $('.product.media .fotorama').on('fotorama:showend', function (e, fotorama, extra) {
    442                 $('.product.media .fotorama__stage .fotorama__active').zoom({
    443                     touch:false
    444                 });
    445             });
    446             $('.fotorama').off('fotorama:fullscreenenter').on('fotorama:fullscreenenter', function (e, fotorama, extra) {
    447                 $('.product.media .fotorama__stage .fotorama__loaded--img').trigger('zoom.destroy');
    448                 $('img.zoomImg').remove();
    449             });
    450             $('.fotorama').off('fotorama:fullscreenexit').on('fotorama:fullscreenexit', function (e, fotorama, extra) {
    451                 $('.product.media .fotorama__stage .fotorama__loaded--img').trigger('zoom.destroy');
    452                 $('img.zoomImg').remove();
    453                 $('img.fotorama__img').not('.fotorama__img--full').each(function(){
    454                     $(this).after($(this).parent().children("img.fotorama__img--full"));
    455                 });
    456                 $('.product.media .fotorama__stage .fotorama__active').zoom({
    457                     touch:false
    458                 });
    459                 $('.product.media .fotorama').off('fotorama:showend').on('fotorama:showend', function (e, fotorama, extra) {
    460                     $('.product.media .fotorama__stage .fotorama__loaded--img').trigger('zoom.destroy');
    461                     $('.product.media .fotorama__stage .fotorama__active').zoom({
    462                         touch:false
    463                     });
    464                 });
    465             });
    466         });
    467     });
    468 });
    469 </script>
    470 <?php endif; ?>
    471 <?php if ($image_size): ?>
    472 <style type="text/css">
    473     @media (min-width: 768px) {
    474         .product.media {
    475             width: <?php echo $image_size * 100 / 12 - 2; ?>% !important;
    476         }
    477         .product-info-main {
    478             width: <?php echo (12 - $image_size) * 100 / 12; ?>% !important;
    479         }
    480     }
    481 </style>
    482 <?php endif; ?>